import * as React from 'react';
import { useNavigate } from 'react-router-dom';
import Box from '@/commonComponents/box/index';
import axios from 'axios';
import Logo from './arrow-right.svg';
import TravelItem from './travelItem/index';
import './index.module.scss';
const { memo, useState } = React;

function Travel() {
  // const { data } = props;
  const [loading, setLoading] = useState(false);
  const [data, setData] = useState([]);
  // 回到上一页
  const navigate = useNavigate();
  const goInfo = () => {
    navigate('/info');
  };
  React.useEffect(() => {
    setLoading(true);
    axios
      .get('/api/rest/travelList')
      // .then((res) => res.json())
      .then((res) => {
        setLoading(false);
        if (res.status === 200 && res.data.code === 0) {
          setData(res.data.data.slice(0, 3));
        } else {
          setData([]);
        }
      })
      .catch(() => {
        setLoading(false);
        setData([]);
      });
  }, []);
  return (
    <Box data={[1]} isLoading={false} styleName="travel-box">
      <div styleName="title" className="fn18">
        出行快讯
        <div styleName="right" onClick={goInfo}>
          更多<Logo styleName="icon"></Logo>
        </div>
      </div>
      <Box data={data} isLoading={loading} styleName="content-box">
        {data.slice(0, 3).map((item, index) => {
          return <TravelItem data={item} key={index}></TravelItem>;
        })}
      </Box>
    </Box>
  );
}

export default memo(Travel);
